iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
Modern Web

JS讀書筆記系列 第 20

JS讀書筆記30天 - Day20 繼承與原型鍊

  • 分享至 

  • xImage
  •  

JavaScript的繼承方式

所謂繼承,就是一個實體能用另一個物件的屬性和方法。

JavaScript和Java的名稱有千絲萬縷的關係,但兩者卻是不同的語言,其中JavaScript和Java都有繼承的模式,但JavaScript是屬於原型繼承,並非Java的類別繼承。

因為在JavaScript中沒有類別(class),所有的內容都是由物件的方式建立,因此在繼承方式上,透過原型繼承的方式,做出與Java相似的類別繼承的方法。

在新的ES6中,JavaScript終於有了類似類別的寫法,因而有了類似類別繼承的方法,但實際上,ES6的新寫法,仍然是JavaScript的原型繼承,而非Java的類別繼承。

原型的特性

  1. 有和物件一樣的特性:因此是有屬性和方法的。
  2. 向上查找:可以透過向上查找,查到可以繼承的原型方法和屬性。
  3. 原型可共用方法和屬性:若多個實體都是繼承同一個原型,原型更新時,實體們會繼承到更新後的結果。

如何查找原型

var a = [1, 2, 3];
console.log(a, a[1], a.length);

首先必須知道的是,a 是實體。

另外,根據JavaScript的特性,a 雖然是陣列,但JavaScript內都是由物件所構成,所以a其實也是物件,可以用物件的方式來操作。

因此,a 物件調用內建的方法時,可以用半形句號(.)接方法名,就像a.length,或是用半形中括弧([]),如a[1]

而在Chrome上的Console中,可以看得更清楚:

螢幕快照 2020-10-05 下午11.02.42

圖中的__proto__,就是物件原型繼承的所有方法和屬性,可以按左側的灰色三角形,展開查看所有繼承的方法與屬性,這裡點擊展開了陣列這個物件原型中所有繼承的屬性和方法:

螢幕快照 2020-10-05 下午11.03.14

上圖所有的列表屬性或方法,都能用物件的方式操作使用。


上一篇
JS讀書筆記30天 - Day19 樣板字面值
下一篇
JS讀書筆記30天 - Day21 關注點分離
系列文
JS讀書筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言